<template>
          <el-row :gutter="10">
          <el-col :span="7"></el-col>
          <el-col :span="9" style="">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1" ><a href="/index">首页</a></el-menu-item>
              <el-menu-item index="2"><a href="/singer">歌手</a></el-menu-item>
              <el-menu-item index="3"><a href="/album">新碟</a></el-menu-item>
              <el-menu-item index="4">排行榜</el-menu-item>
              <el-menu-item index="5">分类歌单</el-menu-item>
              <el-menu-item index="6">电台</el-menu-item>
              <el-menu-item index="7">MV</el-menu-item>
              <el-menu-item index="8">数字专辑</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
<!--  歌单推荐-->
  <div id="recommend" style="background-image: url('/image/back.jpg');" >
    <h1 style="text-align: center;letter-spacing: 10px;font-size: 32px;padding-top: 20px">
      歌单推荐</h1>
    <el-row :gutter="10" style="width: 1950px;margin: 0 auto">
      <el-col :span="7"></el-col>
     <el-col :span="8">
       <el-menu :default-active="1"  mode="horizontal" active-text-color="green">
         <el-menu-item index="1">为你推荐</el-menu-item>
         <el-menu-item index="2">经典国语</el-menu-item>
         <el-menu-item index="3">情歌</el-menu-item>
         <el-menu-item index="4">短视频热歌</el-menu-item>
         <el-menu-item index="5">官方歌单</el-menu-item>
         <el-menu-item index="6">网络歌单</el-menu-item>
       </el-menu>
     </el-col>
    </el-row>
    <el-carousel autoplay="false" interval="0">
      <el-carousel-item style="justify-content: center;text-align: center;">
        <div style="display: flex;justify-content: center" >
          <div>
        <img class="carimg" src="/image/carsoul1.jpg" >
            <p style="font-size: 12px;margin: 6px">崩坏3 OST音乐合辑</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：102.8万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul2.jpg" >
            <p style="font-size: 12px;margin: 6px">繁花 电视剧原声</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1407.3万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul3.jpg" >
            <p style="font-size: 12px;margin: 6px">深夜eom：我和你终究差了点距离</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：7034.7万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul4.webp" >
            <p style="font-size: 12px;margin: 6px">抖音爆款：不可错过的热门旋律</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1377.3万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsou5.jpg" >
            <p style="font-size: 12px;margin: 6px">听多久emo多久，哭了也就过去了</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1468.1万</p>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item style="justify-content: center;text-align: center;">
        <div style="display: flex;justify-content: center" >
          <div>
            <img class="carimg" src="/image/carsoul6.jpg" >
            <p style="font-size: 12px;margin: 6px">原来情绪上头了，连听歌也会哭啊</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：2519.6万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul7.jpg" >
            <p style="font-size: 12px;margin: 6px">伯远 · 热血难凉的追梦少年</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：51.1万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul8.jpg" >
            <p style="font-size: 12px;margin: 6px">这些歌，光是听到就已经很遗憾了</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1981.6万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul9.jpg" >
            <p style="font-size: 12px;margin: 6px">听歌都会哭的人，又怎么会幸福呢</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1379.6万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul10.jpg" >
            <p style="font-size: 12px;margin: 6px">到点了该emo了，00后的听歌现状</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：2762.4万</p>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item style="justify-content: center;text-align: center;">
        <div style="display: flex;justify-content: center" >
          <div>
            <img class="carimg" src="/image/carsoul11.jpg" >
            <p style="font-size: 12px;margin: 6px">爆款戳这里：真爱就是循环一千遍</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1048.0万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul12.jpg" >
            <p style="font-size: 12px;margin: 6px">KPOP热歌挑战！DNA动了</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1547.1万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul13.jpg" >
            <p style="font-size: 12px;margin: 6px">王源2023「客厅狂欢」巡演歌单</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：262.6万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul14.jpg" >
            <p style="font-size: 12px;margin: 6px">抖音热歌｜细数耳机里的流行旋律</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：1241.6万</p>
          </div>
          <div>
            <img class="carimg" src="/image/carsoul15.jpg" >
            <p style="font-size: 12px;margin: 6px">R.I.P CoCo李玟</p>
            <p style="color: grey;font-size: 10px;margin: 2px">播放量：683.3万</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>


  </div>
<!--  新歌首发-->
  <div id="new" style="background-image: url('/image/back.jpg');" >
    <h1 style="text-align: center;letter-spacing: 10px;font-size: 32px;padding-top: 20px">
      新歌首发</h1>
    <el-row :gutter="10" style="width: 1950px;margin: 0 auto">
      <el-col :span="4"></el-col>
      <el-col :span="4">
        <el-button style="height: 40px;width: 120px;position: relative" icon="VideoPlay" >
          播放全部</el-button>
      </el-col>
      <el-col :span="8">
        <el-menu :default-active="1"  mode="horizontal" active-text-color="green">
          <el-menu-item index="1">最新</el-menu-item>
          <el-menu-item index="2">内地</el-menu-item>
          <el-menu-item index="3">港台</el-menu-item>
          <el-menu-item index="4">欧美</el-menu-item>
          <el-menu-item index="5">韩国</el-menu-item>
          <el-menu-item index="6">日本</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
     <el-col :span="4">10</el-col>
      <el-col :span="16">
        <el-row :gutter="10">
         <el-col :span="8">
           <el-card style="border: none;box-shadow: none;">
             <div style="display:flex;text-align: center">
               <div style="width: 33%">
             <img src="/image/new1.jpg" height="100%" width="100%">
               </div>
               <div style="float:left;width: 33%;">
             <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">褪色想念</p>
               <p style="color: grey;font-size: 14px;margin: 5px 0 auto">廖俊涛</p>
               </div>
               <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                 <p style="color: grey;font-size: 14px;margin: 5px 0 auto">03:32</p>
               </div>
             </div>

           </el-card>
           <el-card style="border: none;box-shadow: none;">
             <div style="display:flex;text-align: center">
               <div style="width: 33%">
                 <img src="/image/new2.jpg" height="100%" width="100%">
               </div>
               <div style="float:left;width: 33%;">
                 <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">春雪</p>
                 <p style="color: grey;font-size: 14px;margin: 5px 0 auto">周深</p>
               </div>
               <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                 <p style="color: grey;font-size: 14px;margin: 5px 0 auto">03:28</p>
               </div>
             </div>

           </el-card>
           <el-card style="border: none;box-shadow: none;">
             <div style="display:flex;text-align: center">
               <div style="width: 33%">
                 <img src="/image/new3.jpg" height="100%" width="100%">
               </div>
               <div style="float:left;width: 33%;">
                 <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">Some Type Of Skin</p>
                 <p style="color: grey;font-size: 14px;margin: 5px 0 auto">AURORA</p>
               </div>
               <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                 <p style="color: grey;font-size: 14px;margin: 5px 0 auto">03:12</p>
               </div>
             </div>

           </el-card>
         </el-col>
          <el-col :span="8">
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new4.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">谁不想</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">林宥嘉</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">04:05</p>
                </div>
              </div>

            </el-card>
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new5.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">碧苍《与凤行</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">李佳薇</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">03:49</p>
                </div>
              </div>

            </el-card>
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new6.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">cloudsPUBG MOBILE</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">JVKE</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">02:42</p>
                </div>
              </div>

            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new7.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">少林 Shao Lin</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">刺猬</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">03:32</p>
                </div>
              </div>

            </el-card>
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new8.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">Lonely Stars</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">胜宽 (승관)</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">04:06</p>
                </div>
              </div>

            </el-card>
            <el-card style="border: none;box-shadow: none;">
              <div style="display:flex;text-align: center">
                <div style="width: 33%">
                  <img src="/image/new9.jpg" height="100%" width="100%">
                </div>
                <div style="float:left;width: 33%;">
                  <p style="font-size: 14px;margin: 0 auto;padding-top: 30px">宇宙信封</p>
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">蒲熠星</p>
                </div>
                <div style="float: right;width: 33%;text-align: right;padding-top: 30px">
                  <p style="color: grey;font-size: 14px;margin: 5px 0 auto">04:20</p>
                </div>
              </div>

            </el-card>
          </el-col>
        </el-row>
      </el-col>

    </el-row>



  </div>
<!--  精彩推荐-->
  <div  style="background-image: url('/image/back.jpg');" >
    <h1 style="text-align: center;letter-spacing: 10px;font-size: 32px;padding-top: 20px">
      精彩推荐</h1>
    <el-row :gutter="10">
     <el-col :span="4"></el-col>
      <el-col :span="16 ">
        <el-carousel>
          <el-carousel-item>
        <el-row :gutter="10">
             <el-col :span="12">
             <img src="/image/r1.jpg" style="width: 100% ">
             </el-col>
          <el-col :span="12"><img src="/image/r2.jpg" style="width: 100%;">
          </el-col>
        </el-row>
        </el-carousel-item>
          <el-carousel-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <img src="/image/r3.jpg" style="width: 100% ">
              </el-col>
              <el-col :span="12"><img src="/image/r4.png" style="width: 100%;">
              </el-col>
            </el-row>
          </el-carousel-item>
          <el-carousel-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <img src="/image/r5.png" style="width: 100% ">
              </el-col>
              <el-col :span="12"><img src="/image/r6.png" style="width: 100%;">
              </el-col>
            </el-row>
          </el-carousel-item>
    </el-carousel>

      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
<!--  新碟首发-->
  <div style="background-image: url('/image/back.jpg');" >
    <h1 style="text-align: center;letter-spacing: 10px;font-size: 32px;padding-top: 20px">
      新碟首发</h1>
    <el-row :gutter="10" style="width: 1950px;margin: 0 auto">
      <el-col :span="4"></el-col>
      <el-col :span="4">
      </el-col>
      <el-col :span="8">
        <el-menu :default-active="1"  mode="horizontal" active-text-color="green">
          <el-menu-item index="1">最新</el-menu-item>
          <el-menu-item index="2">内地</el-menu-item>
          <el-menu-item index="3">港台</el-menu-item>
          <el-menu-item index="4">欧美</el-menu-item>
          <el-menu-item index="5">韩国</el-menu-item>
          <el-menu-item index="6">日本</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-carousel autoplay="false" interval="0">
      <el-carousel-item style="justify-content: center;text-align: center;">
        <el-row :gutter="10">
         <el-col :span="2"></el-col>
          <el-col :span="20">
            <el-row :gutter="10">
             <el-col :span="2"></el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die1.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">夜色碳酸</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">完美倒立</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die6.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">如见</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">薛汀哲</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die2.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">春风在吹你在笑</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">媛小小</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die7.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">Rise of the Ronin</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">Inon Zur</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die3.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">谁不是在拼命的活着</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">龙翼</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die8.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">生死归途</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">思维</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                <img class="carimg" style="height: 100px" src="/image/die4.jpg" alt="">
                <p style="margin: 0;position: relative;right: 20px;font-size: 14px">最后的回眸</p>
                <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">小西瓜一枚</p>
              </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die9.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">稳稳的幸福</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">伯远</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                <img class="carimg" style="height: 100px" src="/image/die5.jpg" alt="">
                <p style="margin: 0;position: relative;right: 20px;font-size: 14px">芸芸</p>
                <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">钟屹</p>
              </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die10.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">花易落</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">尹昔眠</p>
                </er-card>
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-col>
          <el-col :span="2"></el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item style="justify-content: center;text-align: center;">
        <el-row :gutter="10">
          <el-col :span="2"></el-col>
          <el-col :span="20">
            <el-row :gutter="10">
              <el-col :span="2"></el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die11.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">仅此一年我判若两人</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">韩小欠</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die12.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">大剧院现场—京彩三重奏音乐会</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">苏贞 /王滔 /张放</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die13.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">冷风吹</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">汉生 /莱奥法塔西</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die14.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">如雁来栖</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">刘珂矣</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die15.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">放 (remix版)</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">歪歪超</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die16.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">夜色碳酸</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">完美倒立</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die17.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">就是现在</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">霄磊</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die18.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">你就不要想起我</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">旺仔加真露</p>
                </er-card>
              </el-col>
              <el-col :span="4">
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die19.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">真没得0vo</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">正五SPYRO /2amDizzy /大头鱼</p>
                </er-card>
                <er-card>
                  <img class="carimg" style="height: 100px" src="/image/die20.jpg" alt="">
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px">夜间男友</p>
                  <p style="margin: 0;position: relative;right: 20px;font-size: 14px;color: grey">承桓</p>
                </er-card>
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-col>
          <el-col :span="2"></el-col>
        </el-row>
      </el-carousel-item>

    </el-carousel>



  </div>
<!--  排行榜-->
  <div  style="background-image: url('/image/back.jpg');" >
    <h1 style="text-align: center;letter-spacing: 10px;font-size: 32px;padding-top: 20px">
      排行榜</h1>
    <el-row :gutter="10">
      <el-col :span="4"></el-col>
      <el-col :span="16 ">
        <el-row :gutter="10">
          <el-col :span="2"></el-col>
         <el-col :span="4">
           <el-card style="background-image: url('/image/rank1.png');color: white">
             <div style="text-align: center;font-size: 22px">
               <p>巅峰榜</p>
               <p style="font-weight: bold">热歌</p>
             </div>
             <div style="font-size: 14px;padding-bottom: 8px">
               <p>1 无名的人</p>
               <p>毛不易</p>
             </div>
             <div style="font-size: 14px;padding-bottom: 8px">
               <p>2 Cruel Summer</p>
               <p>Taylor Swift</p>
             </div>
             <div style="font-size: 14px;padding-bottom: 8px">
               <p>3 Lover</p>
               <p>Taylor Swift</p>
             </div>
           </el-card>
         </el-col>
          <el-col :span="4">
            <el-card style="background-image: url('/image/rank2.png');color: white">
              <div style="text-align: center;font-size: 22px">
                <p>巅峰榜</p>
                <p style="font-weight: bold">新歌</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>1 春风何时来</p>
                <p>花姐</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>2 你 (dadada~ 风轻轻)</p>
                <p>吴半首</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px;  ">
                <p>3 若梦</p>
                <p>en</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card style="background-image: url('/image/rank3.png');color: white">
              <div style="text-align: center;font-size: 22px">
                <p>巅峰榜</p>
                <p style="font-weight: bold">流行指数</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>1 就忘了吧</p>
                <p>1K</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>2 谁不想</p>
                <p>林宥嘉</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>3 我用什么把你留住 </p>
                <p>福禄寿FloruitShow</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card style="background-image: url('/image/rank4.png');color: white">
              <div style="text-align: center;font-size: 22px">
                <p>巅峰榜</p>
                <p style="font-weight: bold">欧美</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>1 we can't be friends</p>
                <p>Ariana Grande</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>2 eternal sunshine</p>
                <p>Ariana Grande</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>3 Suppress</p>
                <p>Fot Me</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card style="background-image: url('/image/rank5.png');color: white">
              <div style="text-align: center;font-size: 22px">
                <p>巅峰榜</p>
                <p style="font-weight: bold">韩国</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>1 ONE SPARK</p>
                <p>TWICE (트와이스)</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>2 To. X (IMLAY Remix)</p>
                <p>太妍 (태연)/IMLAY</p>
              </div>
              <div style="font-size: 14px;padding-bottom: 8px">
                <p>3 Nectar</p>
                <p>THE BOYZ (더보이즈)</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {VideoPlay} from "element-plus"
</script>

<style scoped>
.carimg{
  height: 240px;
  margin-right: 10px;
  transition: 2s;
}
.carimg:hover{
transform: scale(1.05);
}
</style>